<template>
	<div class="body Abnormal">
		<header>
			<i class="iconfont icon-xiangzuo1" @click="goPrev"></i><span>异常入库</span
			><i class="iconfont icon-shanguangdeng" @click="flashOpenOrClose"></i
			><i class="iconfont closeScan" @click="closeScan">关闭</i>
		</header>
		<div class="common-box">
		<div class="content-box">
			<v-scan
			@scanData="scanData"
			ref="ch"
			:switchScan="switchScan"
			:loadingData="loadingData"
			></v-scan>
		</div>
		
		<div class="address">
			<div style="font-size: 16px; line-height: 38px;margin-left: 5px;">项目：</div>
			<el-select v-model="project" placeholder="请选择项目" style="width: 85%; left: 0;" filterable remote :remote-method="getAboList">
				<el-option v-for="item in projectList" :key="item.k" :label="item.v" :value="item.k"></el-option>
			</el-select>
		</div>
		</div>
		<div class="form-content" v-if="ReportList.length">
			<div v-for="(item, index) in ReportList" :key="index">
				<div class="order-box">
					<div class="orderNo" style="display: flex; justify-content: space-between;">
						<div><span>子单号:&nbsp; </span>{{ item.labelNo }}</div>
						<div><span>推荐库位:&nbsp; </span> <span  style="color: red; font-size: 20px;font-weight: 700;">{{ item.loc }}</span></div>
					</div>
					<div class="order-item">
						<div style="width: 55%"><span>项目名称:&nbsp; </span>
							<span v-for="(e, index) in projectList"
							:key="index"
							:value="item.k"
							>
								<span v-if="item.project == e.k" style="color: #000">{{ e.v }}</span>
							</span>
						</div>
						<div><span>发起人:&nbsp; </span>{{ item.sponsorName }}</div>
					</div>
					<div class="order-item"> 
						<div style="width: 55%"><span>工单原因:&nbsp; </span>{{ item.abnormalReason }}</div>
						<div><span>工单描述:&nbsp; </span>{{ item.abnormalExplain }}</div>
					</div>
					<div class="btn">
						<div class="edit" @click="editOrderInfo(index)">修改</div>
						<div class="del" @click="delOrderInfo(index)">删除</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer-btn" @click="commitAbo()">提交</div>
		<el-dialog
		title="提示"
		top="40vh"
		:visible.sync="centerDialogVisible"
		:close-on-click-modal="false"
		width="70%"
		center>
		<span>是否删除该订单？</span>
		<span slot="footer" class="dialog-footer">
			<el-button @click="centerDialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="confirmDel">确 定</el-button>
		</span>
		</el-dialog>
	</div>
</template>
<script>
  import Scan from '@/components/ContinuousScan';
  import pictureSample from '@/components/pictureSample'
  import Header from '@/components/header'
	import * as fetchObj from '@/api/index/reportAbnormal'
	import $ from "jquery"
	import { iatRecorder } from '@/utils/iatRecorder'
	import Vue from 'vue';
	import { Toast, Dialog } from 'vant';
	Vue.use(Toast).use(Dialog);
	export default {
		name: 'ReportAbnormal',
		components: {
			'v-scan': Scan,
      'v-header': Header,
      'pictureSample': pictureSample
		},
		data() {
			return {
				address: '',
      			consignesList: [],
				centerDialogVisible: false,
				code: '',
				loadingData: false,
				fetchObj,
				headerName: '上报异常',
				responseData: {},
				OMS: {},
				aboType: '', // 异常类型
				typeOptions: [], // 异常类型下拉
				aboReason: '',
				reasonOptions: [],
				recipientContactList: ['寄方', '收方'], // 改派收件联系人选择列表
        reassignRecipientContact: '', // 改派收件联系人
        reassignmentAppointmentTime: this.timestampFormat(new Date().getTime(), 'YYYY-MM-DD'), // 改派预约日期
        appointmentPeriod: '', // 改派预约时间段
        appointmentPeriodList: [], // 改派预约时间段数组
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
				localtttOptions: [],
				aboLink: '',
				linkOptions: [],
				aboPer: '',
				perOptions: [],
				aboText: '', // 异常描述
				allData: {}, // 所有异常数据
        uploadParams: {}, // 图片上传附带参数
				switchScan: true,
				CurrentCity: '', // 当前城市
				CurrentLocation: '', // 当前地址
				CurrentDistrict: '', // 当前区县
				longitude: '',
				latitude: '',
				labelList: [], // 标签号列表
				selectedLabelList: [], // 已选择的标签号列表
				labelInput: '', // 手动输入的标签
				iatRecorder3: null,
				mySecond: 0,
				startPerform: false,
        sampleShow: false, // 图片示例是否展示
				sfNetworkNum: '', //  网点人员工号 401107
				projectType: 0, // 订单类型
				sfNetCode: '', // 网点代码
        businessType: '', // 产品名称
		ReportList: [], // 异常列表
		projectList: [],
		currentIndex: 0,
		project: ''
			}
		},
		watch: {
			aboType(val, oval) {
				let that = this;
				if (val != oval) {
					that.aboReason = '';
					for (let ty = 0; ty < that.allData.newAbnormalType.length; ty++) {
						if (that.allData.newAbnormalType[ty].abnormalType == val) {
							that.reasonOptions = that.allData.newAbnormalType[ty].abnormalReason;
						}
					}
				}
			}
		},
		mounted() {
			this.onPlusReady('e') // 获取APP经纬度
			this.getAboList();
			// try {
			// 	CallAndroidOrIOS.ContinuousScan();
			// } catch (error) {}
	// 		//初始化语音
	// 		//这里用一个iatRecorder3接是为了保持当前vue既用到了语音 又可以有自己的私有方法
	// 		this.iatRecorder3= iatRecorder;
	// 		// 接收语音转文字结果
	// 		this.myData(this.iatRecorder3);
			// 异常环节   abnormalLinkMap  '派送'
			// 异常类型   newAbnormalType:abnormalType  '客户类'
			// 异常原因   newAbnormalType:abnormalReason  '寄方客户要求退回'  '客户要求转寄其它地址'
		},
		// beforeDestroy() {
		// 	this.iatRecorder3.destroyFn()
		// },
		created() {
    		this.getQueryConsignesList()
			this.ReportList = this.$store.state.ReportAbnormalList
			this.address = this.$route.query.address
		},
		methods: {
			getQueryConsignesList (address) {
				let that = this
				const params = {
					"address": address
				}
				this.httpRequest1('post', '/system/orgnization/getCangKuList', params).then((res) => {
					that.consignesList = res.data
				})
			},
			ScanSFNumber(inputName) {
				window.QRScanAjax = this.QRScanSFNumber;
				window.TellVue_QRScanResult_Ajax = this.QRScanSFNumber;
				this.$store.state.ScanQRCodeInputName = inputName;
				if (!(this.getItem('SXJF_ifScan') && this.getItem('SXJF_ifScan') == '是')) {
					// 安卓
					try {
						CallAndroidOrIOS.VueSCAN();
					}
					catch(error) {}
				}
				// 苹果
				try {
					window.webkit.messageHandlers.messageSend.postMessage({
						a: '调用app原生扫描二维码/条码',
						b: inputName
					})
				} catch (error) {}
			},
			QRScanSFNumber(qrcode) {
				let that = this;
				let inputName = this.$store.state.ScanQRCodeInputName;
				this[inputName] = qrcode;
			},
			// 接收iOS/android值
			QRScanAjax(qrcode) {
				let that = this;
				let inputName = this.$store.state.ScanQRCodeInputName;
				this[inputName] = qrcode;
				this.confirmLabelInput();
			},
			SetCurrAddress(lngad) {
				this.ReceivingLatitud(lngad);
			},
			/**
			 * 提交异常
			 */
			commitAbo() {
				let that = this;
				if (!this.project) {
					this.$alert('请选择项目', '提示', {
						confirmButtonText: '确定',
					})
					return
				}				
				let omsNoArr = []
				this.ReportList.map(item => {
					omsNoArr.push({'omsNo': item.parentOmsNo, 'labelNo': item.code, 'orderId': item.id, 'loc': item.loc})
				})
				let params = {
					"gps": {
						"latitude": this.$store.state.latitude,
						"longitude": this.$store.state.longitude, 
						"address": this.$store.state.CurrentLocation,
						"city": this.$store.state.CurrentCity,
						"districict": this.$store.state.CurrentDistrict
					},
					"project": this.project,
					"abnormalReason": '异常入库',
					"omsNoArray": omsNoArr
				}
				
				that.httpRequest1('post', '/system/app/reportAbnormalBatch', params,'isLoading_').then(res => {
					if (res.success) {
						this.$message({
							message: '保存成功',
							type: 'success'
						});
						that.ReportList = []
						that.$store.state.ReportAbnormalList = []
					}
				})
			},
			onSuccess() {
				this.$router.back(-1);
			},
			onErr() {
				this.$router.back(-1);
			},
			editOrderInfo (index) {
				this.$router.push({
					name: "ReportAbnoemalEdit",
					query: {
						index,
						address: this.address
					}
				})
			},
			delOrderInfo (index) {
				this.currentIndex = index
				this.centerDialogVisible = true
			},
			confirmDel () {
				this.centerDialogVisible = false
				this.ReportList.splice(this.currentIndex,1)
			},
			sampleAppear() {
				this.sampleShow = true;
			},
			// 删除已选中运单
			deleteLabel(idx) {
				let that = this;
				for (let t = 0; t < that.labelList.length; t++) {
				if (that.labelList[t].productNo == that.selectedLabelList[idx]) {
					that.labelList[t].ifSelect = false;
					that.selectedLabelList.splice(idx, 1);
					$('.SingleLatitudeBox_box>div').eq(t).children('span.iconfont').removeClass('icon-xuanzhong').addClass(
						'icon-weixuanzhong')
					break;
				}
				}
			},
			// 确定扫描 或 手动输入的标签
			confirmLabelInput() {
				let that = this;
				that.labelList.forEach(function (item, idx) {
				if (that.labelInput == item.productNo) {
					item.ifSelect = true;
					$('.SingleLatitudeBox_box>div').eq(idx).children('span.iconfont').removeClass(
						'icon-weixuanzhong').addClass('icon-xuanzhong');
					that.selectedLabelList = that.selectedLabelList.filter(items => {
					return items !== item.productNo
					})
					that.selectedLabelList.push(item.productNo);
				}
				})
			},
			// 全选
			checkAllLabel() {
				let that = this;
				that.selectedLabelList = [];
				for (let p = 0; p < that.labelList.length; p++) {
				that.labelList[p].ifSelect = true;
				that.selectedLabelList[p] = that.labelList[p].productNo;
				$('.SingleLatitudeBox_box>div').eq(p).children('span.iconfont').removeClass('icon-weixuanzhong').addClass(
						'icon-xuanzhong')
				}
			},
			// 请求下拉框数据
			getAboList() {
				let that = this;
				this.httpRequest1('post', '/system/app/queryDataDictionary', {"keyName":"工单维护-项目"}).then(res => {
					that.projectList = res.data
				})
			},
		// 扫描后
			scanData(data) {
				if (!this.project) {
					this.$alert('请先选择项目', '提示', {
						confirmButtonText: '确定'
					})
					return
				}
				if (data.length < 11) {
					this.$alert('单号不能小于11位数,请重新扫描', '提示', {
					confirmButtonText: '确定'
					})
					return
				}
				this.OMS.omsNo = data
				let that = this;
				let postData = {
					omsNo: data, // 单号
					recommendLoc: 'recommendLoc',
					project: this.project
				};
				this.httpRequest1('post', '/system/app/queryOrderByOmsNoYwcAbnormal', postData).then(res => {
				if(res.success) {
					if (res.data) {
						let arrList = that.ReportList.filter(ele => ele.code == res.data.code) 
						if (arrList.length) {
							that.$alert('此单已扫描，请勿重复添加!', '提示', {
								confirmButtonText: '确定',
							})
						} else {
							that.ReportList.unshift(res.data)
							that.$store.state.ReportAbnormalList = that.ReportList
						}
					}
				} else {
					that.$alert('暂无订单信息!', '提示', {
					confirmButtonText: '确定',
					})
				}
				})
			},
			// 关闭扫描框
			closeScan() {
			// 安卓
			try {
				CallAndroidOrIOS.CancelScan();
			} catch (error) {}
			// 苹果
			try {
				window.webkit.messageHandlers.messageSend.postMessage({
				a: "离开app原生半屏扫描二维码/条码",
				});
			} catch (error) {}
			},
			//打开或关闭 闪光灯
			flashOpenOrClose() {
			let that = this;
			// 安卓
			try {
				if (that.ifflash) {
				CallAndroidOrIOS.setTorchEnabled_false(); // setTorchEnabled_false  闪光灯 关闭
				that.ifflash = false;
				} else {
				CallAndroidOrIOS.setTorchEnabled_true(); // setTorchEnabled_true  闪光灯 打开
				that.ifflash = true;
				}
			} catch (error) {}
			// 苹果
			try {
				window.webkit.messageHandlers.messageSend.postMessage({
				a: '打开或关闭闪光灯',
				});
			} catch (error) {}
			},
			// 关闭扫码框
			CloseScanBox() {
			// 安卓
			try {
				CallAndroidOrIOS.CancelScan();
			} catch (error) {}
			// 苹果
			try {
				window.webkit.messageHandlers.messageSend.postMessage({
				a: '离开app原生半屏扫描二维码/条码',
				});
			} catch (error) {}
			},
			goPrev() {
				this.closeScan()
				this.$store.state.ReportAbnormalList = []
				this.$router.push({
					name: "Index",
				})
			},
			switchScanFun(data) {
				if (data) {
				this.switchScan = true // 打开摄像头
				} else {
				this.switchScan = false // 关闭摄像头
				}
			},
			uploadOnChange(file) {
				this.switchScanFun(true); // 打开摄像头
			}
    	},
  		beforeDestroy () {
			this.closeScan()
  		}
  }
</script>
<style scoped lang="less">
	@import "../../components/publicLess.less";
	.common-box {
		height: 100%;
	}
	.Abnormal {
		font-size: 28/50rem;
	}
	.order-box {
		margin: 5px;
		border: 1px solid #e1e1e1;
		padding: 5px 10px;
		line-height: 23px;
		.orderNo {
			border-bottom: 1px solid #e1e1e1;
		}
		.order-item {
			display: flex;
		}
		span {
			color: #6e6b6bbd;
		}
	}
	.btn {
		display: flex;
		justify-content: space-around;
		margin-top: 6px;
		.edit {
			width: 30%;
			background-color: #038EEA;
			color: #fff;
			text-align: center;
			border-radius: 5px;
		}
		.del {
			width: 30%;
			background-color: red;
			color: #fff;
			text-align: center;
			border-radius: 5px;
		}
	}
	/deep/ .el-dialog__header {
		padding: 10px;
	}
	/deep/ .el-dialog--center .el-dialog__body {
		padding: 15px 15px 20px;
		font-size: 16px;
	}
	/deep/ .el-dialog__footer {
		padding-bottom: 10px;
	}
	.footer-btn {
		position: fixed;
		bottom: 20px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border-radius: 5px;
		width: 50%;
		background-color: #038EEA;
		color: #fff;
		margin-left: 25%;
		font-size: 20px;
	}
	
.address {
  margin-top: 10px;
  display: flex;
  img {
    width: 80/50rem;
		padding: 12/50rem;
		box-sizing: border-box;
		height: 80/50rem;
		line-height: 80/50rem;
  }
  .ok-btn {
    width: 76/50rem;
    height: 76/50rem;
    font-size: 28/50rem;
    line-height: 80/50rem;
    margin: 0 10/50rem;
    text-align: center;
    background-color: #038EEA;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
  }
}
.currentAddress {
  font-size: 28/50rem;
  padding: 20/50rem;
  color: #9b9b9b;
}
/deep/ .el-select-dropdown.el-popper {
  left: 0 !important;
  z-index: 9999;
}
.el-select-dropdown .el-select-dropdown__item {
  white-space: normal;
  line-height: 20px !important;
  height: inherit;
  border-bottom: 1px solid #e1e1e1;
  padding-top: 5px;
  padding-bottom: 5px;
}
</style>